<template>
  <div class="bg-[var(--el-bg-color)] w-1/1 h-1/1 p-30px box-border">
    <el-descriptions border title="楼盘信息">
      <el-descriptions-item label="楼盘名称">{{ info.name }}</el-descriptions-item>
      <el-descriptions-item label="参考价">{{ info.reference_price }}元/m²</el-descriptions-item>
      <el-descriptions-item label="物业信息">{{ info.furnish }}</el-descriptions-item>
      <el-descriptions-item label="物业用途">{{ info.property.map((e: any) => e.name).join("/") }}</el-descriptions-item>
      <el-descriptions-item label="产权年限">{{ info.years }}</el-descriptions-item>
      <el-descriptions-item label="所属区域">{{ info.belongName }}</el-descriptions-item>
      <el-descriptions-item label="开发商">{{ info.sellLouPanInfo.developer }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ info.address }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="销售信息" class="mt-30px" border>
      <el-descriptions-item label="销售状态">
        <span
          class="px-8px py-4px cursor-pointer"
          :style="{ backgroundColor: info.sellStatus.backColor, color: info.sellStatus.textColor }"
          >{{ info.sellStatus.name }}</span
        >
      </el-descriptions-item>
      <el-descriptions-item label="开盘时间">
        <span>{{ dayjs(info.sellLouPanInfo.open_time).format("YYYY-MM-DD") }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="交房时间">
        <span>{{ dayjs(info.sellLouPanInfo.getRoomTime).format("YYYY-MM-DD") }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="户型">
        <el-button
          @click="check(p)"
          v-for="(p, index) in info.room_type"
          :key="index"
          class="mr-20px cursor-pointer"
          link
          type="primary"
          >{{ (p as any).name }}<span>({{ findRooms((p as any).id).length }})</span></el-button
        >
      </el-descriptions-item>
      <el-descriptions-item label="售楼电话">
        {{ info.sellLouPanInfo.sellPhone }}
      </el-descriptions-item>
      <el-descriptions-item label="预售许可证">
        {{ info.sellLouPanInfo.license }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="小区规划" class="mt-30px" border>
      <el-descriptions-item label="占地面积">{{ operaNum(info.lou_pan_area.floorArea, "m²") }}</el-descriptions-item>
      <el-descriptions-item label="建筑面积">{{ operaNum(info.lou_pan_area.buildArea, "m²") }}</el-descriptions-item>
      <el-descriptions-item label="规划用户">{{ operaNum(info.lou_pan_area.userNum, "户") }}</el-descriptions-item>
      <el-descriptions-item label="规划栋数">{{ operaNum(info.lou_pan_area.buildNum, "栋") }}</el-descriptions-item>
      <el-descriptions-item label="停车位">{{ operaNum(info.lou_pan_area.parkingSpace, "个") }}</el-descriptions-item>
      <el-descriptions-item label="容积率">{{ operaNum(info.lou_pan_area.volumeRate, "") }}</el-descriptions-item>
      <el-descriptions-item label="绿化率">{{ operaNum(info.lou_pan_area.greeningRate, "%") }}</el-descriptions-item>
      <el-descriptions-item label="物业费">{{ info.lou_pan_area.propertyCost }}</el-descriptions-item>
      <el-descriptions-item label="物业公司">{{ info.lou_pan_area.propertyCompany }}</el-descriptions-item>
    </el-descriptions>
    <checkRoom ref="roomRef"></checkRoom>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getLouPanInfo } from "@/api/modules/broker_help";
import { onBeforeMount, ref } from "vue";
import dayjs from "dayjs";
import checkRoom from "../../components/checkRoom.vue";

const roomRef = ref<InstanceType<typeof checkRoom> | null>();

const route = useRoute();

const operaNum = (num: number, uint: string) => {
  return num === 0 ? "暂无资料" : num + uint;
};

const findRooms = (id: number) => {
  return info.value.rooms.filter((e: any) => e.roomId === id);
};

const info = ref({
  name: "",
  reference_price: 0,
  belongName: "",
  address: "",
  furnish: "",
  sellStatus: {
    backColor: "",
    name: "",
    textColor: ""
  },
  property: [],
  years: "",
  developer: "",
  lou_pan_area: {
    propertyCompany: "",
    floorArea: 0,
    buildArea: 0,
    buildNum: 0,
    userNum: 0,
    parkingSpace: 0,
    volumeRate: 0,
    greeningRate: 0,
    propertyCost: ""
  },
  sellLouPanInfo: {
    open_time: 0,
    getRoomTime: 0,
    sellPhone: "",
    license: "",
    developer: ""
  },
  room_type: [],
  rooms: []
});

const check = (row: any) => {
  const rooms = info.value.rooms.filter((e: any) => e.roomId === row.id);
  const params: any = {
    roomList: rooms
  };
  roomRef.value?.acceptParams(params);
};

const getInfo = async () => {
  const id = parseInt(route.query.id as string);
  const { data } = await getLouPanInfo(id);
  info.value = data as any;
};

onBeforeMount(async () => {
  Promise.all([getInfo()]);
});
</script>

<style></style>
